<template>
    <div class="DataPermissionSetting">
        <MyDialog :model-value="true" :type="DialogType.C2" title="监管部门-数据权限" @close="onClose">
            <DataTable ref="RegulatorDataDataTableRef" :data="list" :isColorBottomBorder="true" :hasTop="false" :hasPager="false" :hasCheckbox="false" divHeight="calc(100vh - 350px)" v-bind="$attrs">
                <vxe-column title="省" min-width="120" show-overflow>
                    <template #default="{ row }">
                        <template v-if="row.editFlag">
                            <DataSelect ref="ProvinceRef" class="w-100" table="Province" action="GetSearch" v-model:id="row.provinceID" v-model:name="row.provinceName" @change="onProvinceChange(row)"></DataSelect>
                        </template>
                        <template v-else>
                            {{ row.province_Name || "-" }}
                        </template>
                    </template>
                </vxe-column>

                <vxe-column title="市" min-width="120" show-overflow>
                    <template #default="{ row }">
                        <template v-if="row.editFlag">
                            <DataSelect ref="CityRef" class="w-100" table="City" action="GetSearch" v-model:id="row.cityID" v-model:name="row.cityName" :isLoadingData="false" :filter="CityFilter" @change="onCityChange(row)"></DataSelect>
                        </template>
                        <template v-else>
                            {{ row.city_Name || "-" }}
                        </template>
                    </template>
                </vxe-column>

                <vxe-column title="县" min-width="120" show-overflow>
                    <template #default="{ row }">
                        <template v-if="row.editFlag">
                            <DataSelect ref="AreaRef" class="w-100" table="Area" action="GetSearch" v-model:id="row.areaID" v-model:name="row.areaName" :filter="AreaFilter" :isLoadingData="false"></DataSelect>
                        </template>
                        <template v-else>
                            {{ row.area_Name || "-" }}
                        </template>
                    </template>
                </vxe-column>

                <vxe-column title="操作" width="100">
                    <template #default="{ row, rowIndex }">
                        <template v-if="row.editFlag">
                            <el-button type="primary" @click="onAdd(row)">添加</el-button>
                        </template>
                        <template v-else>
                            <el-button type="danger" @click="onDel(row, rowIndex)">删除</el-button>
                        </template>
                    </template>
                </vxe-column>
            </DataTable>
        </MyDialog>
    </div>
</template>

<script lang="ts" setup>
import Enums from "@/gx/Enums";
import Gx from "@/gx/Gx";
import { TipsType } from "@/_gx/TsEnums";
import { FormRules } from "element-plus";
import { DialogType } from "@/_gx/TsEnums";

//接收父组件的传值
const rowAutoID = inject("rowAutoID") as Ref<number | null>;

//表格的数据
const list = ref([]);

//初始化
const Init = () => {
    App.CallApi(Api.RegulatorData.GetSearch("[x].[RegulatorDataID] ASC"), {
        data: {
            _RegulatorID: rowAutoID.value,
            _IsSystem: false,
        },
        success: (res: any) => {
            let item = {
                regulatorID: rowAutoID.value,
                provinceID: null,
                provinceName: "",
                cityID: null,
                cityName: "",
                areaID: null,
                areaName: "",
                editFlag: true,
            };
            res.unshift(item);
            list.value = res;
        },
    });
};

const ProvinceRef = ref(null);
const CityRef = ref(null);
const CityFilter = ref({ _ProvinceID: null });
const AreaRef = ref(null);
const AreaFilter = ref({ _CityID: null });

//省改变
const onProvinceChange = (row) => {
    CityRef.value.ClearData();
    CityRef.value.ClearList();
    onCityChange();
    if (!Gx.IsEmpty(row.provinceID)) {
        CityFilter.value._ProvinceID = row.provinceID;
        CityRef.value.GetList();
    }
};

//市改变
const onCityChange = (row?) => {
    AreaRef.value.ClearData();
    AreaRef.value.ClearList();
    if (!Gx.IsEmpty(row) && !Gx.IsEmpty(row.cityID)) {
        AreaFilter.value._CityID = row.cityID;
        AreaRef.value.GetList();
    }
};

//添加
const onAdd = (row) => {
    if (Gx.IsEmpty(row) || Gx.IsEmpty(row.provinceID)) {
        App.Tips({ msg: "请选择省份" });
        return;
    }

    App.CallApi(Api.RegulatorData.Insert, {
        data: row,
        success: (res) => {
            App.Tips({ type: TipsType.Success, msg: "添加成功" });
            Init();
        },
    });
};
//删除
const onDel = (row, index) => {
    App.Confirm({
        msg: "确定要删除此数据？",
        type: TipsType.Warning,
        onOk: () => {
            App.CallApi(Api.RegulatorData.Delete(row.autoID), {
                success: () => {
                    list.value.splice(index, 1);
                },
            });
        },
    });
};

//关闭
const onClose = () => {
    emits("close", false);
};

//向上抛出的事件与方法
const emits = defineEmits(["close"]);
defineExpose({ Init });
</script>
